<template>
  <div class="video-pop">
    <div class="video-contanier">
      <div class="head">
        <span class="titel">视频监控</span>
        <span class="close-icon" @click="close">x</span>
      </div>
      <div class="videos">
        <video-player class="vjs-custom-skin" :options="playerOptions" @ready="playerReadied"> </video-player>
        <div class="botton-icon">
          <div class="icons">
            <div class="icon add" @click="lrRotate('add')"></div>
            <div class="icon release" @click="lrRotate('release')"></div>
          </div>
          <div class="icons">
            <div class="icon left" @click="lrRotate('left')"></div>
            <div class="icon right" @click="lrRotate('right')"></div>
            <div class="icon up" @click="lrRotate('up')"></div>
            <div class="icon down" @click="lrRotate('down')"></div>
            <div class="icon refreash" @click="lrRotate('refreash')" v-if="false"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import { ptzChange, tokenSurvival } from "../api/api";
let itval = null;
export default {
  name: "videoPop",
  props: {
    videoUrl: {
      type: String,
      default: "",
    },
    videoChannelCode: {
      type: String,
      default: "",
    },
    channelId: {
      require: true,
      type: String,
    },
  },
  data() {
    return {
      playerOptions: {
        // videojs and plugin options
        height: "360",
        sources: [],
        autoplay: true,
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
        },
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        poster: "path-to/static/images/surmon-5.jpg",
      },
      duration: 100,
      pan: 0,
      tilt: 0,
      zoom: 0,
      addTimer: null,
      releaseTimer: null,
      // rightTimer: null,
      // leftTimer: null,
    };
  },
  watch: {
    videoUrl: {
      handler(n) {
        this.playerOptions.sources = [
          {
            withCredentials: false,
            type: "application/x-mpegURL",
            src: n,
          },
        ];
        this.clearTokenAliveItval();
        this.startTokenAlive();
      },
    //   immediate: true,
      deep: true,
    },
  },
  methods: {
    // 关闭弹窗
    close() {
      this.duration = 0;
      this.pan = 0;
      this.tilt = 0;
      this.zoom = 0;
      this.$emit("update:state", false);
    //   this.clearTokenAliveItval();
    },
    // 视频流持续请求
    playerReadied(player) {
      /* player.tech({ IWillNotUseThisInPlugins: true }).hls;
      player.tech_.hls.xhr.beforeRequest = function (options) {
        return options;
      }; */
    },

    // 转动按钮
    // mouseDown (state) {
    //     switch (state) {
    //         case 'add':
    //             if (this.addTimer) return
    //             this.pan = 0;
    //             this.tilt = 0;
    //             this.addTimer = setInterval(() => {
    //                if (this.zoom < 1) {
    //                     this.zoom += 0.1;
    //                     if (this.zoom > 1) {
    //                         this.zoom = 1;
    //                     }
    //                     this.ptzChange();
    //                 }
    //             }, 30)
    //             break;
    //         case 'release':
    //             this.pan = 0;
    //             this.tilt = 0;
    //             this.releaseTimer = setInterval(() => {
    //                 console.log('re', this.zoom);
    //                if (this.zoom > -1) {
    //                     this.zoom -= 0.1;
    //                     if (this.zoom < -1) {
    //                         this.zoom = -1;
    //                     }
    //                     this.ptzChange();
    //                 }
    //             }, 30)
    //             break;
    //     }
    // },

    // mouseUp (state) {
    //     switch (state) {
    //         case 'add':
    //             clearInterval(this.addTimer);
    //             this.addTimer = null;
    //             break;
    //         case 'release':
    //             clearInterval(this.releaseTimer);
    //             this.releaseTimer = null;
    //             break;
    //     }
    // },

    // 上下左右
    /* lrRotate(state) {
			switch (state) {
				case "add":
					this.zoom = 0.1;
					this.pan = 0;
					this.tilt = 0;
					this.ptzChange();
					break;
				case "release":
					this.zoom = -0.1;
					this.pan = 0;
					this.tilt = 0;
					this.ptzChange();
					break;
				case "left":
					this.pan = -0.01;
					this.zoom = 0;
					this.tilt = 0;
					this.ptzChange();
					break;
				case "right":
					this.pan = 0.01;
					this.zoom = 0;
					this.tilt = 0;
					this.ptzChange();
					break;
				case "up":
					this.tilt = 0.01;
					this.pan = 0;
					this.zoom = 0;
					this.ptzChange();
					break;
				case "down":
					this.tilt = -0.01;
					this.pan = 0;
					this.zoom = 0;
					this.ptzChange();
					break;
				case "refreash":
					this.playerOptions.sources = [
						{
							withCredentials: false,
							type: "application/x-mpegURL",
							src: this.videoUrl
						}
					];
					break;
			}
		}, */

   /*  // 云台转动
    ptzChange() {
      ptzChange(this.videoChannelCode, {
        duration: this.duration,
        pan: this.pan,
        tilt: this.tilt,
        zoom: this.zoom,
      }).then((res) => {
        console.log(res);
      });
    }, */
   /*  startTokenAlive() {
      console.log(this.channelId);
      // tokenSurvival({ channelId: this.channelId });
      itval = setInterval(() => {
        // tokenSurvival({ channelId: this.channelId });
      }, 1000 * 60 * 5);
    },
    clearTokenAliveItval() {
      console.log("清除token保活的定时请求！");
      clearInterval(itval);
    }, */
  },
  beforeDestroy() {
    // this.clearTokenAliveItval();
  },
};
</script>
<style lang="less" scoped>
.video-pop {
  position: fixed;
  z-index: 8888;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 18, 17, 0.5);
  .video-contanier {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 757px;
    height: 516px;
    background-color: rgba(0, 9, 9, 0.5);
    border: 2px solid #006d64;
  }
  .head {
    color: #ffffff;
    height: 32px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 18px;
    .close-icon {
      font-size: 18px;
      cursor: pointer;
      color: #00a89a;
    }
  }
  .videos {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
    & /deep/ .video-player {
      height: 400px;
      .video-js {
        height: 100%;
      }
    }
  }
  .botton-icon {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 38px;
    background: rgba(0, 149, 118, 0.2);
    margin-top: 10px;
    padding: 0 15px;
    box-sizing: border-box;
    .icons {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .icon {
      width: 20px;
      height: 20px;
      cursor: pointer;
      background-repeat: no-repeat;
      margin-right: 20px;
      background-size: 100% 100%;
    }
    /* 	.add {
			background-image: url("../assets/img/icons/add.png");
		}
		.release {
			background-image: url("../assets/img/icons/release.png");
		}
		.left {
			background-image: url("../assets/img/icons/left.png");
		}
		.right {
			background-image: url("../assets/img/icons/right.png");
		}
		.up {
			background-image: url("../assets/img/icons/up.png");
		}
		.down {
			background-image: url("../assets/img/icons/down.png");
			margin-right: 0;
		}
		.refreash {
			background-image: url("../assets/img/icons/refreash.png");
			margin-right: 0;
		} */
  }
}
</style>
